﻿<html>
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>瀑布流</title>
    <link href="../../Styles/common.css" rel="stylesheet" />
    <style>
        /*body, div { margin: 0; padding: 0; }
        img { border: 0; }
        #container { text-align: center; }
            #container .cell { padding: 5px 5px 0; border: 1px solid #E3E3E3; background: #F5F5F5; margin-top: 10px; }
            #container p { line-height: 20px; margin-top: 5px; }*/
    </style>
    <script src="../../Scripts/jquery-1.8.3.min.js"></script>
    <script src="../../Scripts/jquery.waterfall.js"></script>
</head>
<body>
    <div id="container">
        <div class="cell">
            <img src="P_000.jpg" /><p>00</p>
        </div>
        <div class="cell">
            <img src="P_001.jpg" /><p>01</p>
        </div>
        <div class="cell">
            <img src="P_002.jpg" /><p>02</p>
        </div>
        <div class="cell">
            <img src="P_003.jpg" /><p>03</p>
        </div>
        <div class="cell">
            <img src="P_004.jpg" /><p>04</p>
        </div>
        <div class="cell">
            <img src="P_005.jpg" /><p>05</p>
        </div>
        <div class="cell">
            <img src="P_006.jpg" /><p>06</p>
        </div>
        <div class="cell">
            <img src="P_007.jpg" /><p>07</p>
        </div>
        <div class="cell">
            <img src="P_008.jpg" /><p>08</p>
        </div>
        <div class="cell">
            <img src="P_009.jpg" /><p>09</p>
        </div>
        <div class="cell">
            <img src="P_010.jpg" /><p>10</p>
        </div>
        <div class="cell">
            <img src="P_011.jpg" /><p>11</p>
        </div>
        <div class="cell">
            <img src="P_012.jpg" /><p>12</p>
        </div>
        <div class="cell">
            <img src="P_013.jpg" /><p>13</p>
        </div>
        <div class="cell">
            <img src="P_014.jpg" /><p>14</p>
        </div>
        <div class="cell">
            <img src="P_015.jpg" /><p>15</p>
        </div>
        <div class="cell">
            <img src="P_016.jpg" /><p>16</p>
        </div>
        <div class="cell">
            <img src="P_017.jpg" /><p>17</p>
        </div>
        <div class="cell">
            <img src="P_018.jpg" /><p>18</p>
        </div>
        <div class="cell">
            <img src="P_019.jpg" /><p>19</p>
        </div>
    </div>
    <script>
        var opt = {
            getResource: function (index, render)
            { //index为已加载次数,render为渲染接口函数,接受一个dom集合或jquery对象作为参数。通过ajax等异步方法得到的数据可以传入该接口进行渲染，如 render(elem)
                if (index >= 7)
                    index = index % 7 + 1;
                var html = '';
                for (var i = 20 * (index - 1) ; i < 20 * (index - 1) + 20; i++)
                {
                    var k = '';
                    for (var ii = 0; ii < 3 - i.toString().length; ii++)
                    {
                        k += '0';
                    }
                    k += i;
                    var src = "http://cued.xunlei.com/demos/publ/img/P_" + k + ".jpg";
                    html += '<div class="cell"><img src="' + src + '" /><p>' + k + '</p></div>';
                }
                return $(html);
            },
            auto_imgHeight: true,
            insert_type: 1
        };
        $('#container').waterfall(opt);
    </script>
</body>
</html>
